import React from 'react'
import styles from './style'
import {View,SafeAreaView,Text,TextInput,Modal,TouchableOpacity,ScrollView} from 'react-native'
import Back from '../../../../common/component/back';
const typeArr = ['摄影', '人物', '风景', '动物', '抽象', '节日'];
export default class AddImg extends React.Component{
  constructor(props){
    super(props)
    this.state = {
        title:'',
        type:'',
        dis:'',
        img:'',
     typeName: '请选择类型',
     showTypePop: false
    }
  }
  closeModal() {
    this.setState({
      showTypePop: false
    });
    // this.props.closeModal(false);
}
  render() {
    let {navigation} = this.props
    let {title,typeName,showTypePop,dis} = this.state
   
    _changeText = ((index) => {
      this.setState({typeName: typeArr[index]})
      this.closeModal()
  })
  
    return(
      <SafeAreaView style={{flex: 1}}>
        <Back navigation={navigation}></Back>
        <Text style={styles.titileText}>新建/编辑画板</Text>
        <View style={styles.form}>
           <View style={styles.inputStyle}>
              <Text style={styles.formTitle}>画板标题</Text>
              <TextInput placeholder="请输入画板标题" style={styles.inputText} placeholderTextColor='#101010' onChangeText={(value) => {this.setState({title:value})}} value={title}></TextInput>
           </View>
           <View style={[styles.inputStyle,{marginTop:30}]}>
              <Text style={styles.formTitle}>类        型</Text>
            <TouchableOpacity onPress={() => {this.setState({showTypePop:true})}} underlayColor="#101010" style={[{width:260}]}>
              <Text style={[{width:260,fontSize:14,color:'#101010'}]}>{typeName}</Text>
            </TouchableOpacity>
           </View>
           <View style={[styles.inputStyle,{marginTop:30}]}>
              <Text style={styles.formTitle}>描        述</Text>
              <TextInput placeholder="请输入画板描述" style={[styles.inputText,{ marginTop:-5}]} multiline={true} placeholderTextColor='#101010' maxLength={50} onChangeText={(value) => {this.setState({dis:value})}} value={dis}></TextInput>
              <Text style={styles.formTitle}>{dis.length}/50</Text>
           </View>
        </View>
        <Modal      
              transparent={true}
              visible={showTypePop}
              animationType={'fade'}
              onRequestClose={() => this.closeModal()}
        >
      <TouchableOpacity onPress={() => this.closeModal()}>
         <View style={styles.bgColor} ></View>
      </TouchableOpacity>
        
        <View style={styles.scrollText}>
            {/* 底部滚动 */}
          <ScrollView showsVerticalScrollIndicator={false} >
              {
                  typeArr.map((item,index) => {
                          return (
                          <TouchableOpacity key={index} onPress={() => _changeText(index)}>
                            <View  style={styles.viewItem}>
                            <Text>{item}</Text>
                            </View>
                          </TouchableOpacity>
                          )
                        })
                      }
                   
               </ScrollView>
        </View>
     </Modal>
      </SafeAreaView>
    )
  }
}
